<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
  .content{
    width: 200px;
    height: 200px;
    border: 1px solid #333;
    text-align: center;
    line-height: 200px;
    font-size: 30px;
  }
  button.active{
    background-color: red;
  }
</style>
</head>
<body>

  <div id='app'>
    <button v-for="(el, index) in data" :class="{active: num == index}" @click="changeTab(index)" >{{el.title}}</button>
    <div v-for="(el,index) in data" v-show="num==index" class="content">{{el.content}}</div>
  </div>

<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js'></script>
<script>
  const app = new Vue({
    el: '#app'
    ,data:{
      num: 0
      ,data:[
        {
          title: '标题1'
          ,content: '内容1'
        },
        {
          title: '标题2'
          ,content: '内容2'
        },
        {
          title: '标题3'
          ,content: '内容3'
        },
        {
          title: '标题4'
          ,content: '内容4'
        }
      ]
    }
    ,methods: {
      changeTab(n){
        this.num = n;
      }
    }
  })
</script>
</body>
</html>